<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 按需加载的意思是，当使用这个js文件时，在下载，加载js文件的一部分是办不到的 -->
    <script>
        var script = document.createElement('script');
        script.src = "demo.js"; // 这句话会导致系统异步下载这个文件，包括先创建img元素，给img标签的src赋值
        if (script.readyState) { // IE的script独有的状态码，开始是'loading'，加载完变成"complete"或者"loaded"
            script.onreadystatechange = function () { // 状态码发生改变会触发这个事件
                if (script.readyState == "complete" || script.readyState == "loaded") {
                    test();
                }
            } // 兼容IE
        } else {
            script.onload = function () {
                test();
            } // 下载并执行完触发load事件，但是，IE就script上没有load事件
        }
        document.head.appendChild(script); // 把标签插入 页面才会执行
        // setTimeout(function(){
        //     test(); //设置定时器，是为了保证下载完成
        // }, 1000);





        // 封装函数，需要异步加载script标签时，使用，最常用的方法
        function loadScript(url, callback) {// callback回调函数的意思
            var script = document.createElement('script');
            if (script.readyState) {
                script.onreadystatechange = function () {
                    if (script.readyState == "complete" || script.readyState == "loaded") {
                        // callback(); // 方法一
                        // obj[callback]();// 方法二
                        eval(callback);// 方法三
                    }
                } 
            } else {
                script.onload = function () {
                    // callback(); // 方法一
                    // obj[callback]();// 方法二
                    eval(callback);// 方法三
                } 
            }
            script.src = url; // 会异步下载, 需要写在onreadystatechange后面，为了防止下载速度过快
            document.head.appendChild(script);
        }

        // loadScript("demo.js", function(){
        //     test();  // 方法一
        // });
        // loadScript("demo.js", 'demo'); //方法二，和函数库相配合，函数库所有函数写在对象里面
        // loadScript("demo.js", 'test()');//方法三，不推荐

    </script>
</body>
</html>